<html>

<head>
    <meta charset="utf-8" />
    <title>测试</title>
    <script type="text/javascript" src="__dotnar_lib_base_url__/js/lib/require.min.js"></script>
	<script type="text/javascript" src="__dotnar_lib_base_url__/js/lib/loader.js"></script>
    <script type="text/javascript" src="/js/require.config.js"></script>
    <script>
    require(["common", "core"], function(jSouper) {
        require(["coAjax"], function(coAjax) {
            App.set("$Event.submit", function() {

                coAjax.post("http://dev.dotnar.com:3000/hehe", {
                    name: App.get("$Cache.name"),
                    password: App.get("$Cache.password"),
                }, function(result) {
                    var data = result.result;
                    App.set("$Cache.data", data);
                    alert("success", data.name + "|" + data.password)
                }, function(argument) {
                    alert("error", "请求出错")
                });

            });
            removeLoader();
        });
    });
    </script>
</head>

<body>
    <div id="jSouperApp">
        <input type="text" value="{{$Cache.name}}" input-bind="{{'$Cache.name'}}">
        <input type="text" value="{{$Cache.password}}" input-bind="{{'$Cache.password'}}">
        <button event-click="{{'$Event.submit'}}">提交</button>
        <br/>
        <br/>
        <br/>
        <style type="text/css">
        .outbox {
            width: 100px;
            height: 100px;
            position: relative;
            display: inline-block;
            vertical-align: top;
            /*position: absolute;*/
            /*overflow: hidden;*/
            
            background-color: cyan;
        }
        .topbox {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .bottombox {
            position: relative;
            white-space: nowrap;
            word-break: break;
            /*background-color: orange;*/
            /*width: 0;*/
            /*height: 0;*/
        }
        .item {
            width: 0;
            height: 0;
            margin: 0 20px;
            display: inline-block;
        }
        .outbox:hover .topbox {
            height: 0;
            width: 0;
        }
        .outbox:hover {
            width: 100%;
            position: absolute;
        }
        .outbox:hover .bottombox .item {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        .navbox {
            position: relative;
        }
        </style>
        <div class="navbox">
            <div class="outbox">
                <div class="topbox"></div>
                <div class="bottombox">
                    <div class="item"></div>
                    <div class="item"></div>
                </div>
            </div>
            <div class="outbox"></div>
        </div>
    </div>
</body>

</html>
